JypyterLab User InterfaceΒΆ
[1]:
*** Settings ***
Library SeleniumLibrary
Library SeleniumScreenshots
[2]:
*** Variables ***
${token} e464f8278a8658d607c3061ca63155fdda618ec601f52c18
[3]:
*** Keywords ***
Open url
[Arguments] ${url}
${status} = Run keyword and return status Switch browser singleton
Run keyword if ${status} == False
... Open browser ${url} alias=singleton ELSE Go to ${url}
Set window size 1024 768
*** Keywords ***
Run Selenium keyword and return status
[Arguments] ${keyword} @{arguments}
${tmp}= Register keyword to run on failure No operation
${status}= Run keyword and return status ${keyword} @{arguments}
Register keyword to run on failure ${tmp}
[Return] ${status}
[4]:
*** Tasks ***
Open JupyterLab
Open url http://localhost:8888/lab
${requires token}= Run selenium keyword and return status
... Page should contain element id:password_input
Run keyword if ${requires token}
... Input text id:password_input ${token}
Run keyword if ${requires token}
... Click button id:login_submit
Wait until element is visible id:launcher-0
Wait until element is not visible id:jupyterlab-splash
By default, JupyterLab starts with its Launcher tab open on its tabbed editor. Launcher lists shortcut icons for creating a new notebook with any of the currently available kernels.
Alternatively, an existing notebook could be opened from the File browser available on the left sidebar.
[5]:
*** Tasks ***
Annotate main page
${n1}= Add note
... id:filebrowser
... text=File browser
${n2}= Add note
... id:launcher-0
... position=top
... text=Tabbed editor
${n3}= Add note
... css:DIV.jp-Launcher-section:nth-child(2) > DIV.jp-Launcher-cardContainer
... text=Available kernels
Capture page screenshot
Remove elements ${n1} ${n2} ${n3}
[5]:
[6]:
*** Tasks ***
Create new Robot notebook
Double click element
... css:LI.jp-DirListing-item:nth-child(9) > SPAN.jp-DirListing-itemText
Wait until page contains
... Robot Framework Jupyter example
Sleep 2s
Launching a new notebook or loading an existing one opens the notebook on a new tab on its tabbed editor. Each notebook tab has its own toolbar with the most important actions and its bound kernel name. A simple notebook is displayed with its Markdown cells, code cells and their results. On the left side of each cell is its execution number, or empty brackets, when the cell has not been successfully executed yet.
[7]:
*** Tasks ***
Annotate Robot notebook
${n1}= Add pointy note
... css:DIV.p-TabBar-tabIcon.jp-FolderIcon.jp-SideBar-tabIcon
... text=Toggle sidebar
... position=right
${n2}= Add pointy note
... css:DIV.p-Widget.jp-Toolbar.jp-NotebookPanel-toolbar > DIV.p-Widget.jp-ToolbarButton.jp-Toolbar-item:nth-child(4) > BUTTON.jp-ToolbarButtonComponent
... position=bottom
... text=Notebook toolbar
${n3}= Add note
... jquery:a:contains('Report')
... text=Execution results
... position=bottom
${n4}= Add note
... id:Robot-Framework-Jupyter-example
... text=Markdown cell
... position=right
${n5}= Add note
... jquery:PRE.CodeMirror-line:contains('SeleniumLibrary')
... text=Code cell
... position=right
${n6}= Add note
... jquery:PRE.CodeMirror-line:contains('Open url')
... text=Code cell
${n7}= Add note
... jquery:PRE.CodeMirror-line:contains('Show the new')
... text=Code cell
${n8}= Add pointy note
... css:BUTTON.jp-Toolbar-kernelName.jp-ToolbarButtonComponent
... text=Notebook kernel
... position=bottom
${n9}= Add pointy note
... jquery:.jp-InputPrompt:contains('[1]')
... text=Execution number
... position=top
${n10}= Add pointy note
... jquery:.jp-InputPrompt:contains('[2]')
... text=Execution number
... position=top
${n11}= Add pointy note
... jquery:.jp-InputPrompt:contains('[3]')
... text=Execution number
... position=top
Align elements horizontally
... ${n4} ${n3} ${n5} ${n6} ${n7}
Capture page screenshot
Remove elements
... ${n1} ${n2} ${n3} ${n4} ${n5}
... ${n6} ${n7} ${n8} ${n9} ${n10}
... ${n11}
[7]:
Finally, JupyterLab includes Inspector tool that can display context aware code inspection information provided by the current kernel. For example, robotkernel uses inspector for displaying context aware documentation, especially documentation of the currently used keyword.
Inspector can be opened from the context menu, which itself can be opened with right mouse click on a notebook. Inspector is opened as a separate tab, which can be dragged onto right or bottom side of the window β whichever suits best.
[8]:
*** Tasks ***
Show inspection menuitem
Open context menu
... id:Robot-Framework-Jupyter-example
Highlight
... jquery:.p-Menu-itemLabel:contains('Open Inspector')
${n1}= Add note
... jquery:.jp-InputPrompt:contains('[1]')
... text=1) Right click on notebook to open the context menu.
... width=300
${n2}= Add note
... jquery:.jp-InputPrompt:contains('[2]')
... text=2) Select Open Inspector from the context menu.
... width=300
${n3}= Add note
... jquery:.jp-InputPrompt:contains('[3]')
... text=3) Drag the new Inspector tab onto preferred location.
... width=300
Capture page screenshot
Clear highlight
... jquery:.p-Menu-itemLabel:contains('Open Inspector')
Remove elements ${n1} ${n2} ${n3}
Click element jquery:.p-Menu-itemLabel:contains('Open Inspector')
[9]:
*** Tasks ***
Open inspector and drag it to the right
Double click element jquery:.p-Menu-itemLabel:contains('Open Inspector')
Wait until element is visible
... css:LI.p-TabBar-tab.jp-mod-current.p-mod-closable.p-mod-current > DIV.p-TabBar-tabLabel
Drag and drop by offset
... css:LI.p-TabBar-tab.jp-mod-current.p-mod-closable.p-mod-current > DIV.p-TabBar-tabIcon
... 300 300
${n1}= Add note
... id:jp-inspector
... text=Sticky Inspector tab for displaying context aware information.
... width=300
Capture page screenshot
Remove elements ${n1}
[9]:
[10]:
*** Settings ***
Suite teardown Close all browsers



